/*
* @Author: Josh
* @Date:   2019-08-16 21:27:16
* @Last Modified by:   Administrator
* @Last Modified time: 2019-08-17 00:00:08
*/

/* 菜单组件 */
.ju-menu > .ju-menu-item {
    display      : flex;
    height       : 2.3rem;
    padding      : 0 1rem;
    align-items  : center;
    border-bottom: 1px solid #eee;
    font-size    : .8rem;
}


/* 菜单名称 */
.ju-menu > .ju-menu-item > .ju-menu-name {
    flex         : 1;
    overflow     : hidden;
    white-space  : nowrap;
    text-overflow: ellipsis;
    color        : #333;
}
/* 菜单信息 */
.ju-menu > .ju-menu-item > .ju-menu-value {
    max-width    : 5rem;
    height       : 1rem;
    line-height  : 1rem;
    overflow     : hidden;
    white-space  : nowrap;
    text-overflow: ellipsis;
    color        : #999;
}
/* 下级操作引导图标 */
.ju-menu > .ju-menu-item > .ju-menu-icon {
    margin-left: .3rem;
    color      : #999;
}

/* 切换开关 */
.ju-menu > .ju-menu-item > .ju-switch {
    position                   : relative;
    box-sizing                 : content-box;/*便于计算里面小圆直径*/
    width                      : 2.6rem;
    height                     : 1.4rem;
    border                     : 1px solid #ccc;
    outline                    : 0;
    border-radius              : .75rem;
    background-color           : rgba(0,0,0,0.1);
    transition                 : background-color .3s, border .3s;
    /*去掉webkit内核的默认样式*/
    -webkit-appearance         : none;
    /*去掉webkit的默认点击效果*/
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* 选中状态下 改变开关边框和颜色 */
.ju-menu > .ju-menu-item > .ju-switch:checked {
    border-color    : #07C160;
    background-color: #07C160;
}
/* 使用伪元素实现按钮 */
.ju-menu > .ju-menu-item > .ju-switch::after {
    content         : "";
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 1.4rem;
    height          : 1.4rem;
    border-radius   : .7rem;
    background-color: #FFF;
    box-shadow      : 0 0 2px #999;/*用于区分元素边界*/
    transition      : left .3s;
}
/*选中状态更改圆形按钮位置*/
.ju-menu > .ju-menu-item > .ju-switch:checked::after {
    left: 1.2rem;
}